<template>
	<div ref="echartsRef" class="echarts-content"></div>
</template>

<script setup lang="ts">
import { useEcharts } from "@/hooks/useEchart";
import { EChartsOption } from "echarts";
const echartsRef = ref<HTMLElement>();
const data = ref([
	{ value: 1048, name: "Search Engine" },
	{ value: 735, name: "Direct" },
	{ value: 580, name: "Email" },
	{ value: 484, name: "Union Ads" },
	{ value: 300, name: "Video Ads" },
]);

let option: EChartsOption = {
	grid: {
		top: 0,
		bottom: 0,
		left: 0,
		right: 0,
	},
	legend: {
		orient: "vertical",
		left: "left",
	},
	tooltip: {
		trigger: "item",
	},
	color: ["#F56C6C", "#409EFF", "#67C23A"],
	series: [
		{
			name: "Access From",
			type: "pie",
			radius: ["40%", "70%"],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 10,
				borderColor: "#fff",
				borderWidth: 2,
			},
			label: {
				show: false,
				position: "center",
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 40,
					fontWeight: "bold",
				},
			},
			labelLine: {
				show: false,
			},
			data: data.value,
		},
	],
};

useEcharts(echartsRef, option);
</script>
<style scoped lang="less">
.echarts-content {
	width: 100%;
	height: 100%;
}
</style>
